{{ define "default/index.html" }}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>百题斩</title>
    <link rel="stylesheet" href="/assets/common/libs/layui/css/layui.css?v={{.time}}" />
</head>

<body class="layui-layout-body layui-main">
    <fieldset class="layui-elem-field layui-field-title layui-col-xs11 layui-col-md6" style="margin-top: 20px;">
        <legend>百题斩</legend>
    </fieldset>
    <form class="layui-form" action="/download">
        <div class="layui-form-item layui-col-xs11 layui-col-md6">
            <label class="layui-form-label">试卷标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="title" autocomplete="off" value="百题斩" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-col-xs11 layui-col-md6">
            <label class="layui-form-label">副标题</label>
            <div class="layui-input-block">
                <input type="text" name="subTitle" lay-verify="title" autocomplete="off"
                    value="姓名：_________日期：_________时间：______对题：___道" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-col-xs11 layui-col-md6">
            <label class="layui-form-label">几步运算</label>
            <div class="layui-input-block">
                <input type="radio" name="FormulaLength" value="2" title="一步" checked="">
                <input type="radio" name="FormulaLength" value="3" title="二步">
                <input type="radio" name="FormulaLength" value="4" title="三步">
            </div>
        </div>
        <div class="layui-form-item layui-col-xs11 layui-col-md6">
            <label class="layui-form-label">运算类型</label>
            <div class="layui-input-block">
                <input type="checkbox" name="symbolTypes" value="0" title="加" checked="">
                <input type="checkbox" name="symbolTypes" value="1" title="减">
                <input type="checkbox" name="symbolTypes" value="2" title="乘">
                <input type="checkbox" name="symbolTypes" value="3" title="除">
            </div>
        </div>
        <div class="layui-form-item layui-col-xs11 layui-col-md6">
            <label class="layui-form-label">几位数字</label>
            <div class="layui-input-block">
                <input type="radio" name="formulaDigit" value="1" title="一位" checked="">
                <input type="radio" name="formulaDigit" value="2" title="二位">
                <input type="radio" name="formulaDigit" value="3" title="三位">
            </div>
        </div>
        {{range .rules}}
        <div class="layui-form-item layui-col-xs11 layui-col-md6">
            <label class="layui-form-label">{{.name }}</label>
            <div class="layui-input-inline" style="width: 150;">
                <input type="checkbox" name="rules" value="{{.key }}" lay-skin="switch" lay-text="ON|OFF" checked>

            </div>
            <div class="layui-form-mid layui-word-aux">{{.desc }}</div>
        </div>
        {{end}}
        <div class="layui-form-item layui-col-xs11 layui-col-md6">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">预览</button>
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="download">下载</button>
            </div>
        </div>

    </form>

    <script type="text/javascript" src="/assets/common/libs/layui/layui.js?v={{.time}}"></script>
    <script>
        layui.use(['layer', 'form'], function () {
            var $ = layui.jquery;
            var form = layui.form;
            form.on('submit(download)', function (data) {
                var symbolTypes = []
                $('[name=symbolTypes]:checked').each(function (index, domEle) {
                    symbolTypes.push($(this).val());
                });
                data.field['symbolTypes'] = symbolTypes;
                console.info(JSON.stringify(data.field))
                var rules = []
                $('[name=rules]:checked').each(function (index, domEle) {
                    rules.push($(this).val());
                });
                data.field['rules'] = rules;
                var filename = ""

                $.ajax({
                    type: "POST",
                    url: "/createPdf/",
                    data: JSON.stringify(data.field),
                    traditional: true,
                    async: false,
                    success: function (res) {
                        filename = res
                    },
                    error: function (res) {
                        console.info(res)
                        var html = res.data;
                        layer.open({
                            type: 1,
                            area: ['500px', '90%'],
                            title: "预览",
                            content: html,
                            shadeClose: true,
                            shade: 0.8,
                            btn: ['关闭'],
                            cancel: function (layer_window) {
                                // 关闭弹出框页面
                                layer.close(layer_window);
                            }
                        });
                    }
                });
                window.open("download?filename=" + filename);
                return false;
            });
            form.on('submit(demo1)', function (data) {
                var symbolTypes = []
                $('[name=symbolTypes]:checked').each(function (index, domEle) {
                    symbolTypes.push($(this).val());
                });
                data.field['symbolTypes'] = symbolTypes;
                var rules = []
                $('[name=rules]:checked').each(function (index, domEle) {
                    rules.push($(this).val());
                });
                data.field['rules'] = rules;
                console.info(JSON.stringify(data.field))
                $.ajax({
                    type: "POST",
                    url: "/preview/",
                    data: JSON.stringify(data.field),
                    traditional: true,
                    success: function (res) {
                        var html = [];
                        for (i = 0; i < res.length; i++) {
                            if (res.charAt(i) == '\n') {
                                html.push("<br/>");
                            } else if (res.charAt(i) == ' ') {
                                html.push("&nbsp;");
                            } else {
                                html.push(res.charAt(i));
                            }
                        }
                        layer.open({
                            type: 1
                            , title: false //不显示标题栏
                            , closeBtn: false
                            , area: '400px;'
                            , shade: 0.8
                            , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                            , btn: ['关闭']
                            , anim: 'up'
                            , style: 'position:fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;'
                            , btnAlign: 'c'
                            , moveType: 1 //拖拽模式，0或者1
                            , content: html.join('')
                            , cancel: function () {
                                // 关闭弹出框页面
                                layer.close();
                            }
                        });

                    },
                    error: function (res) {
                        console.info(res)
                        var html = res.data;
                        layer.open({
                            type: 1,
                            area: ['500px', '90%'],
                            title: "预览",
                            content: html,
                            shadeClose: true,
                            shade: 0.8,
                            btn: ['关闭'],
                            cancel: function (layer_window) {
                                // 关闭弹出框页面
                                layer.close(layer_window);
                            }
                        });
                    }
                });


                return false;
            });
        });

    </script>
</body>

</html>

{{ end }}